<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page, useVbenModal } from '@vben/common-ui';

import { Button, message, Popconfirm, Switch } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteRoleApi, getRolePageApi, setRoleStatusApi } from '#/api';

import FormDrawer from './handle/create.vue';

const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      fieldName: 'name',
      label: '角色名称',
    },
    {
      component: 'Input',
      fieldName: 'mark',
      label: '角色标识',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 按下回车时是否提交表单
  submitOnEnter: false,
  // 默认展开
  collapsed: false,
};

const gridOptions: VxeGridProps<any> = {
  columns: [
    { field: 'id', title: 'ID', width: 50 },
    { field: 'name', title: '角色名称' },
    { field: 'mark', title: '角色标识' },
    { field: 'status', title: '状态', slots: { default: 'status' } },
    { field: 'created_at', formatter: 'formatDateTime', title: '创建时间' },
    {
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 200,
      slots: {
        default: 'action',
      },
    },
  ],
  // 高度自适应
  height: 'auto',
  // 单元格内容发生变化，原始值保留
  keepSource: false,
  // 工具栏配置
  toolbarConfig: {
    refresh: true, // 刷新
    print: false, // 打印
    export: false, // 导出
    zoom: true, // 最大化最小化
    slots: {
      buttons: 'toolbar-actions',
    },
  },
  // 分页配置
  pagerConfig: {},
  // 数据请求
  proxyConfig: {
    response: {
      result: 'items', // 列表数据属性
      total: 'meta.total', // 总条数
    },
    ajax: {
      query: async ({ page }, formValues) => {
        return await getRolePageApi({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};

// 新增编辑弹出表单组件
const [Form, formDrawerApi] = useVbenModal({
  connectedComponent: FormDrawer,
});

const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

// 新增编辑弹出表单方法
function handleSave(action, row) {
  const record = action === 'edit' ? row : {};
  const title = action === 'edit' ? '编辑角色' : '新增角色';

  formDrawerApi.setData({
    record,
    gridApi,
  });

  formDrawerApi.setState({
    title,
  });

  formDrawerApi.open();
}

// 删除数据方法
function handleDelete(id) {
  deleteRoleApi(id).then((response) => {
    message.success('删除数据成功');
    gridApi.reload();
  });
}

// 修改状态
function switchStatus(id) {
  setRoleStatusApi(id).then((response) => {
    message.success('修改状态成功');
    gridApi.reload();
  });
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
        <Button
          type="primary"
          v-access:code="['permission']"
          @click="handleSave('add')"
        >
          新增
        </Button>
      </template>
      <template #status="{ row }">
        <Switch
          v-model:checked="row.status"
          :checked-value="1"
          :un-checked-value="0"
          @click="switchStatus(row.id)"
        />
      </template>
      <template #action="{ row }">
        <Button size="small" type="link" @click="handleSave('edit', row)">
          编辑
        </Button>
        <Popconfirm
          cancel-text="取消"
          ok-text="确认"
          title="确认删除此数据吗"
          @confirm="handleDelete(row.id)"
        >
          <Button danger size="small" type="link">删除</Button>
        </Popconfirm>
      </template>
    </Grid>
    <Form />
  </Page>
</template>
